<template>
	<view class="alarm-container">
		<uv-radio-group v-model="radiovalue" @change="onChange" placement="row" class="custom-radio-group">
			<uv-radio name="1" label="发生中" :customStyle="{margin: '8px'}"></uv-radio>
			<uv-radio name="0" label="已恢复" :customStyle="{margin: '8px'}"></uv-radio>
			<uv-radio name="2" label="已忽略" :customStyle="{margin: '8px'}"></uv-radio>
		</uv-radio-group>


		<view class="orders-list" style="">
			<view class="level-list" v-for="item in alarmList" :key="item.id" @click="goAlarmMes(item)">
				<view class="custom-component" v-if="item.alState == 1">
					<view class="mark">
						<view class="iconfont icon-yk_yuanquan_fill"
							style="background: #e42214;margin-right: 6rpx;"></view>
					</view>
				</view>
				<view class="custom-component" v-else-if="item.alState == 0">
					<view class="mark">
						<view class="iconfont icon-yk_yuanquan_fill"
							style="background: #41d068;margin-right: 6rpx;"></view>
					</view>
				</view>
				<view class="custom-component" v-else-if="item.alState == 2">
					<view class="mark">
						<view class="iconfont icon-yk_yuanquan_fill"
							style="background: #9c9393;margin-right: 6rpx;"></view>
					</view>
				</view>
				<!-- 储能的字段和其他的不一样 -->
				<view class="custom-component" v-if="item.alarmStatus == '已恢复'">
					<view class="mark">
						<view class="iconfont icon-yk_yuanquan_fill"
							style="color: #41d068;font-size: 20rpx;margin-right: 6rpx;"></view>
					</view>
				</view>

				<view class="custom-component" v-if="item.alarmStatus == '发生中'">
					<view class="mark">
						<view class="iconfont icon-yk_yuanquan_fill"
							style="color: #e42214;font-size: 20rpx;margin-right: 6rpx;"></view>
					</view>
				</view>

				<view class="custom-component" v-if="item.alarmStatus == '已忽略'">
					<view class="mark">
						<view class="mark">
							<text class="iconfont icon-yk_yuanquan_fill"
								style="color: #9c9393;font-size: 20rpx;margin-right: 6rpx;"></text>
						</view>
					</view>
				</view>


				<view class="list-left" @click="goAlarmMes">{{item.alState}}{{item.name || item.alarmName}}</view>

				<view class="time">{{item.createTime || item.alarmStartTime}}</view>
				<view class="list-right">
					<uv-icon name="arrow-right"></uv-icon>
				</view>

			</view>

		</view>

	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		alarmMap
	} from "@/utils/mapping/alarmMap"
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	const radiovalue = ref("1")
	const alarmList = ref([])
	const moduleId = ref(null)
	const queryParams = reactive({
		"pageNum": 1,
		"pageSize": 10,
		"queryObj": {
			"powerStation": "",
			"name": "",
			"equipment": "",
			"beginTime": "",
			"endTime": "",
			"grade": "",
			"alState": "",
			"dzId": null
		}
	})


	const onChange = (e) => {
		console.log("测试的", e)
		radiovalue.value = e
		// queryParams.pageNum = 1 /*  */
		// const map = new Map()
		// map.set(0, '1')
		// map.set(1, '0')
		// map.set(2, '2')
		if (moduleId.value == '3') {
			queryParams.alarmStatus = e
		} else {
			queryParams.queryObj.alState = e
		}

		goAlarmMes(true)
	}
	//跳转具体告警
	const goAlarmMes = async (isRefresh = false) => {

		uni.showLoading({
			title: '加载中'
		})
		if (isRefresh) {
			alarmList.value = []
			queryParams.pageNum = 1
		}
		const {
			data
		} = await alarmMap(queryParams, moduleId.value)
		let alarmData = data.data.list || []
		if (alarmData && alarmData.length > 0) {
			alarmList.value = alarmList.value.concat(alarmData)
			queryParams.pageNum += 1
		}
		uni.stopPullDownRefresh();
		uni.hideLoading()
	}
	onLoad(() => {
		moduleId.value = uni.getStorageSync('zh-h5-select-module')
	})
</script>

<style lang="scss" scoped>
	.alarm-container {
		.custom-radio-group {
			justify-content: center;
		}

		.orders-list {
			padding: 20rpx;
			// padding-top: 180rpx;
			padding-bottom: 0;

			.level-list {
				display: flex;
				height: 135rpx;
				line-height: 120rpx;
				border-bottom: 1rpx solid #DCDCDD;
				justify-content: space-between;
				align-items: center;

				.custom-component {
					flex: 0.6;

					.mark {
						.iconfont {
							height: 20rpx;
							width: 20rpx;
							border-radius: 50%;
						}
					}
				}

				.list-left {
					flex: 2;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 500;
					margin-left: -7%;
					color: rgba(0, 0, 0, 0.8);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 80rpx;
				}

				.time {
					flex: 2;
					font-size: 25rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 500;
					color: rgba(71, 67, 67, 0.8);
				}

				.list-right {
					font-size: 34rpx;
					font-family: SFPro-Semibold, SFPro;
					font-weight: 600;
					color: rgba(60, 60, 67, 0.3);
				}
			}
		}

	}
</style>